<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>表单 - Xui Demo</title>
	<!-- demo data -->
	<link rel="stylesheet" type="text/css" href="../demo.css">
	
	<!-- xui -->
	<link rel="stylesheet" type="text/css" href="../../xui.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../xui.js"></script>
	
	<!-- xform -->
	<script type="text/javascript">
		$(function(){
			var xform = $("#xform").xform({
				url:"http://localhost:8080/xsoft/upload",	//服务器接口地址
				//fileupload:true,							//开启上传文件,默认为false
				success:function(data){						//成功回调
					$(".xinfo").html(data);
				}
			});
			
			$("#submit").click(function(){
				xform.submit();
			});
		})
	</script>
</head>
<body>
	<h2>基本表单</h2>
	<form class="xform">
		<label>尊姓大名</label>
		<input type="text" name="name"/>
		<label>兴趣爱好</label>
		<input type="text" name="hobby"/>
	</form>
	
	<h2>水平排列表单</h2>
	<form class="xform" id="xform">
		<div class="xgroup">
			<label class="g1">尊姓大名</label>
			<div class="g2">
				<input type="text" name="name"/>
			</div>
		</div>
		<div class="xgroup">
			<label class="g1">兴趣爱好</label>
			<div class="g2">
				<input type="text" name="hobby"/>
			</div>
		</div>
		<div class="xbar">
			<span class="xbtn" id="submit">提交</span>
		</div>
	</form>
	<div class="xinfo"></div>
		
	<h2>内联表单</h2>
	<form class="xform">
		<div class="xgroup">
			<label class="g1">尊姓大名</label>
			<div class="g2"><input type="text" name="name"/></div>
			<label class="g1">兴趣爱好</label>
			<div class="g2"><input type="text" name="hobby"/></div>
		</div>
	</form>
	
	
	<h2>固定宽度</h2>
	<form class="xform">
		<input type="text" class="xw1" placeholder=".xw1"/><br/>
		<input type="text" class="xw2" placeholder=".xw2"/><br/>
		<input type="text" class="xw3" placeholder=".xw3"/><br/>
		<input type="text" class="xw4" placeholder=".xw4"/><br/>
	</form>
</body>
</html>